<!-- 左侧菜单子导航 -->
<template>
  <!-- 用div解决 The template root requires exactly one element -->
  <div class="menu-wrapper">
    <!-- 遍历routes -->
    <template v-for="item in routes">
		<!-- 判断item-->
		<template v-if="!item.hidden&&item.children">
			<!-- 如果当前这个节点只有一个子元素，且这个节点的第一个子元素没有子元素时，显示一个特殊的菜单样式-->
			<router-link v-if="item.children.length===1 && !item.children[0].children && !item.alwaysShow" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">
				<!-- 具体的菜单项 通过path进行渲染index-->
				<el-menu-item :index="item.menuId+'/'+item.children[0].menuId">
					<span v-if="item.children[0].meta&&item.children[0].meta.title">{{item.children[0].meta.title}}</span>
				</el-menu-item>
			</router-link>
			<!-- 如果当前项拥有多个子集 通过path或者name进行渲染index ,-->
			<el-submenu v-else :index="item.menuName||item.menuPath" :key="item.menuName">
				<template slot="title">
					<span v-if="item.menuName">{{item.menuName}}</span>
				</template>
				<!-- 如果子集未隐藏则遍历子集 -->
				<template v-for="child in item.children">
					<template  v-if="!child.hidden">
						<sub-menu v-if="child.children&&child.children.length > 0" :routes="[child]" :key="child.menuCode" class="nest-menu" :is-nest="true"></sub-menu>
						<router-link v-else :to="child.menuUrl" :key="child.menuCode">
							<!-- 具体菜单项 通过path进行渲染index-->
								<el-menu-item :index="item.menuUrl+'/'+child.menuUrl">
								<!-- 如果元属性且元属性下的title为真-->
									<span v-if="child.menuName&&child.menuName">{{child.menuName}}</span>
								</el-menu-item>
						</router-link>
					</template>
				</template>
			</el-submenu>
		</template>
    </template>
  </div>
</template>

<script>
export default {
  name: 'SubMenu',
  props: {
	routes: {
		type: Array
	},
	isNest: {
		type: Boolean,
		default: false
	}
  },
  created(){
		console.log("父组件传递过来的roter信息",this.routes)
  }
}
</script>

<style>
.menu-wrapper{
	width: 210px;
}
</style>
